@function px2rem($px) {
  // 根元素字体为100px
  @return $px / 100 * 1rem;
}

html,
body {
  background: url("../../assets/images/home/bg.png") no-repeat;
  background-size: cover;
  width: 100%;
}

.home {
  .tar {
    text-align: right;
  }
  .tac {
    text-align: center;
  }

  .header {
    display: flex;
    justify-content: space-between;
    padding: px2rem(40);
    .title {
      width: px2rem(158);
      height: px2rem(37);
      background: url("../../assets/images/home/title-v2.png") no-repeat;
      background-size: 100% 100%;
    }
    .search {
      width: px2rem(124);
      height: px2rem(48);
      background: url("../../assets/images/home/search.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .banner {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .swiper {
      width: 100%;
      height: 100%;
    }

    img {
      width: px2rem(716);
      height: px2rem(320);
    }
  }
  .news {
    width: px2rem(702);
    height: px2rem(112);
    background: #ffffff;
    border-radius: px2rem(16);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin: px2rem(40) auto;
    .left {
      width: px2rem(60);
      height: px2rem(60);
      background: url("../../assets/images/home/hot-news.png") no-repeat;
      background-size: 100% 100%;
      margin: auto px2rem(20);
      box-sizing: border-box;
    }

    .right {
      // flex: 1;
      width: px2rem(600);

      .items {
        .item {
          display: flex;
          padding: px2rem(12) 0;

          img {
            width: px2rem(48);
            height: px2rem(28);
            margin: 0 px2rem(8);
          }

          .title {
            font-size: px2rem(24);
            color: #333;
            word-break: keep-all; /* 不换行 */
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
            text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
          }
        }
      }
    }
  }
  .product {
    width: px2rem(688);
    margin: px2rem(40) auto;
    background: #ffffff;
    border-radius: px2rem(16);

    .title {
      height: px2rem(54);
      font-size: px2rem(38);
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      color: #141c30;
      line-height: px2rem(46);
      padding: px2rem(30);
      display: flex;
      align-items: center;
      // display: inline-block;
      &::before {
        content: "";
        display: inline-block;
        width: px2rem(40);
        height: px2rem(40);
        background: url("../../assets/images/home/icon-title.png") no-repeat;
        background-size: 100% 100%;
        margin-right: px2rem(8);
      }
    }

    .list {
      padding: px2rem(30);
      .list-titles {
        display: flex;
        justify-content: space-between;

        .list-title {
          color: #9da7c0;
          font-size: px2rem(26);
          flex: 1;
        }
      }
      .items {
        .item {
          display: flex;
          display: flex;
          justify-content: space-between;
          border-bottom: px2rem(2) solid #eaecf1;
          padding: px2rem(20) 0;
          .name {
            display: flex;
            flex-direction: column;
            flex: 1;
            .top {
              height: px2rem(40);
              font-size: px2rem(28);
              font-family: PingFang SC, PingFang SC;
              font-weight: 700;
              color: #141c30;
              line-height: px2rem(34);
            }
            .bottom {
              display: flex;
              align-items: center;
              padding: px2rem(12) 0;

              .code {
                font-size: px2rem(26);
                color: #9da7c0;
              }
              img {
                margin-left: px2rem(6);
                width: px2rem(60);
                height: px2rem(36);
              }
            }
          }
          .last {
            width: px2rem(126);
            height: px2rem(38);
            font-size: px2rem(34);
            font-family: D-DIN-DIN, D-DIN-DIN;
            font-weight: bold;
            color: #e46050;
            line-height: px2rem(40);
            flex: 1;
            padding-top: px2rem(20);
          }
          .trend {
            img {
              width: px2rem(128);
              height: px2rem(82);
            }
          }
          &.green {
            .last {
              color: #51d16d;
            }
          }
        }
      }
    }
  }
  .zw {
    height: px2rem(200);
  }
  .tabs {
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    .tab {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: px2rem(20) 0;

      img {
        width: px2rem(48);
        height: px2rem(48);
      }
      .text {
        font-size: px2rem(24);
        font-family: PingFang SC, PingFang SC;

        color: #9da7c0;
        line-height: px2rem(28);
        margin: px2rem(20) 0;
      }
      &.active {
        .text {
          color: #0066ff;
          font-weight: 700;
        }
      }
    }
  }
}

.modal {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;

  .content {
    position: relative;
    top: px2rem(-120);
    .card {
      width: px2rem(580);
      height: px2rem(798);
      background: url("../../assets/images/home/modal.png") no-repeat;
      background-size: 100% 100%;
      position: relative;

      .btn {
        width: px2rem(500);
        height: px2rem(96);
        line-height: px2rem(96);
        text-align: center;
        border-radius: px2rem(999);
        font-size: px2rem(32);
        color: #fff;
        background-color: #0066ff;
        position: absolute;
        bottom: px2rem(68);
        left: 0;
        right: 0;
        margin: auto;
      }
    }
    .close {
      width: px2rem(64);
      height: px2rem(64);
      background: url("../../assets/images/home/icon-close.png") no-repeat;
      background-size: 100% 100%;
      position: absolute;
      left: 0;
      right: 0;
      margin: px2rem(120) auto 0;
      // margin-bottom: px2rem(120);
    }
  }
}
